<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"">
<meta charset="utf-8">
	<title>jQuery UI Button - Icons</title>
	<link rel="stylesheet" href="/common/opensource/jquery/themes/base/jquery.ui.all.css">
	<script src="/common/opensource/jquery/jquery-1.9.1.js"></script>
	<script src="/common/opensource/jquery/ui/jquery.ui.core.js"></script>
	<script src="/common/opensource/jquery/ui/jquery.ui.widget.js"></script>
	<script src="/common/opensource/jquery/ui/jquery.ui.button.js"></script>
	<style type="text/css">
	body {
	font-size: 62.5%;
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}

table {
	font-size: 1em;
}

.demo-description {
	clear: both;
	padding: 12px;
	font-size: 1.3em;
	line-height: 1.4em;
}

.ui-draggable, .ui-droppable {
	background-position: top;
}
	
	</style>
	<script>
	$(function() {
		$( "button:first" ).button({
			icons: {
				primary: "ui-icon-locked"
			},
			text: false
		}).next().button({
			icons: {
				primary: "ui-icon-locked"
			}
		}).next().button({
			icons: {
				primary: "ui-icon-gear",
				secondary: "ui-icon-triangle-1-s"
			}
		}).next().button({
			icons: {
				primary: "ui-icon-gear",
				secondary: "ui-icon-triangle-1-s"
			},
			text: false
		});
	});
	</script>
	
</head>
<body>
<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>
 
<div class="demo-description">
<p>Some buttons with various combinations of text and icons.</p>
</div>

</body>
</html>